import { useParams } from "react-router-dom"
import Nabar from "../../conpoment/Nabar"
import { Swiper, Button } from 'antd-mobile'
import style from './index.module.css'
import p2 from '../s_xq1/img/sp-1.png'
import p3 from '../s_xq1/img/sp-2.png'
import p4 from '../s_xq1/img/sp-3.png'
import p5 from '../s_xq1/img/sp-4.png'
import p6 from '../s_xq1/img/sp--5.png'
import Xq2 from '../../conpoment/xq2'
import Xq3 from '../../conpoment/xq3'
import Xq4 from "../../conpoment/xq4"
function Index() {
  const {id}=useParams()
  const data=[
     {
      img:p2
    },
     {
      img:p3
    },
     {
      img:p4
    },
     {
      img:p5
    },
     {
      img:p6
    },

  ]
  if (id === '1') {
    return (
    <div className={style.detailPage}>
      <Nabar title='商品' sticky={false}></Nabar>
      {/* 轮播 */}
      <div className={style.galleryBox}>
        <Swiper autoplay loop>
          {data.map((i, idx) => (
            <Swiper.Item key={idx}>
              <img src={i.img} alt='' className={style.galleryImg} />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>

      {/* 价格与标题 */}
      <div className={style.infoCard}>
        <div className={style.price}>¥89</div>
        <div className={style.title}>蓝素 双仁润肠口服液 10ml*6支</div>

        <div className={style.serviceRow}>
          <span className={style.serviceTag}>正品保障</span>
          <span className={style.serviceTag}>隐私发货</span>
          <span className={style.serviceTag}>专业药师</span>
          <span className={style.serviceTag}>官网直供</span>
        </div>
      </div>

      {/* 功效与说明概览 */}
      <div className={style.featuresRow}>
        <div className={style.featureItem}>
          <div className={style.featureTitle}>产品介绍</div>
          <div className={style.featureDesc}>双仁润肠口服液…</div>
        </div>
        <div className={style.featureItem}>
          <div className={style.featureTitle}>用法用量</div>
          <div className={style.featureDesc}>口服，一次10ml…</div>
        </div>
        <div className={style.featureItem}>
          <div className={style.featureTitle}>服用禁忌</div>
          <div className={style.featureDesc}>孕妇禁用…</div>
        </div>
      </div>

      {/* 底部条 */}
      <div className={style.bottomBar}>
        <div className={style.bottomNotice}>商品已售罄，点击缺货登记，到货第一时间通知。</div>
        <Button block shape='rounded' color='danger' className={style.bottomBtn}>缺货登记</Button>
      </div>
    </div>
  )
  } else if(id==='2'){
    return(
      <div>
        <Xq2 />
      </div>
    )
  } else if (id==='3') {
    return <Xq3 />          
  }else if(id==='4'){
    return <Xq4 />
  } 
}
export default Index
